<template>
  <div class="ItinWrap">
    <div class="Itintitle">
      22-23单双板综合滑雪营（6天5晚）2023/02/05-2023/02/10共1个团
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tabsList"
          :key="index"
          :label="item.label"
          :name="item.name"
          >{{ item.label }}</el-tab-pane
        >
      </el-tabs>
      <div class="tabsWrap">
      <div class="tabsItem">
        <div class="itemGoto">去程</div>
        <div class="itemRight">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="出发日期">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.startDate"
                  
                ></el-date-picker>
           
            </el-form-item>
            <el-form-item label="选择交通">
              <el-radio-group v-model="form.startTraffic">
                <el-radio label="aircraft">飞机</el-radio>
                <el-radio label="train">火车</el-radio>
                <el-radio label="bus">巴士</el-radio>
              </el-radio-group>
              <el-button type="primary" class="addList" @click="addTravel"
                >添加出行项</el-button
              >
            </el-form-item>
        <el-form-item  :inline="true" v-for="(item,index) in travelList" :key="index">
            <!-- 飞机 -->
            <div class="travelitem" v-if="item.type=='aircraft'">
                <el-row  :span="21">
                <el-col :span="3"><el-input v-model="form.user" placeholder="航空公司"></el-input></el-col>
                <el-col :span="3"><el-input v-model="form.user" placeholder="航班号"></el-input></el-col>
                <el-col :span="3"><el-input v-model="form.user" placeholder="起飞地点"></el-input></el-col>
                <el-col :span="3"><el-input v-model="form.user" placeholder="降落地点"></el-input></el-col>
                <el-col :span="3"><el-date-picker type="date" placeholder="起飞时间" style="width: 100%;" v-model="form.date1"></el-date-picker></el-col>
                <el-col :span="3"><el-date-picker type="date" placeholder="降落时间" style="width: 100%;" v-model="form.date1"></el-date-picker></el-col>
                 <el-button type="danger" @click="deletetrave(index)">删除</el-button>
                </el-row>
    </div>
            <!-- 火车 -->
            <div class="travelitem" v-if="item.type=='train'">
                <el-row  :span="30">
                <el-col :span="4"><el-input v-model="form.user" placeholder="列车车次"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="发车地点"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="到达地点"></el-input></el-col>
                <el-col :span="4"><el-date-picker type="date" style="width: 100%;" placeholder="开车时间" v-model="form.date1"></el-date-picker></el-col>
                <el-col :span="4"><el-date-picker type="date" style="width: 100%;" placeholder="到达时间" v-model="form.date1"></el-date-picker></el-col>
                <el-button type="danger"  @click="deletetrave(index)">删除</el-button>
            </el-row>
              
            </div>
            <!-- 巴士 -->
            <div class="travelitem" v-if="item.type=='bus'">
                <el-row  :span="24">
                <el-col :span="4"><el-input v-model="form.user" placeholder="汽车品牌"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="车系(选填)"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="汽车颜色"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="车牌号"></el-input></el-col>
                <el-button type="danger"  @click="deletetrave(index)">删除</el-button>
                </el-row>
            </div>
        </el-form-item>
            <el-form-item label="集合时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.startTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-col><el-input v-model="form.startLocation" placeholder="集合地点"></el-input></el-col>
              </el-col>
            </el-form-item>
            <el-form-item label="联系人">
              <el-select v-model="form.startContacts" placeholder="请选择联系人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="tabsItem" style="margin-top:20px">
        <div class="itemGoto">返程</div>
        <div class="itemRight">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="出发日期">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.endDate"
                  
                ></el-date-picker>
           
            </el-form-item>
            <el-form-item label="选择交通">
              <el-radio-group v-model="form.endTraffic">
                <el-radio label="aircraft">飞机</el-radio>
                <el-radio label="train">火车</el-radio>
                <el-radio label="bus">巴士</el-radio>
              </el-radio-group>
              <el-button type="primary" class="addList" @click="addTravel"
                >添加出行项</el-button
              >
            </el-form-item>
        <el-form-item  :inline="true" v-for="(item,index) in travelList" :key="index">
            <!-- 飞机 -->
            <div class="travelitem" v-if="item.type=='aircraft'">
                <el-row  :span="21">
                <el-col :span="3"><el-input v-model="form.user" placeholder="航空公司"></el-input></el-col>
                <el-col :span="3"><el-input v-model="form.user" placeholder="航班号"></el-input></el-col>
                <el-col :span="3"><el-input v-model="form.user" placeholder="起飞地点"></el-input></el-col>
                <el-col :span="3"><el-input v-model="form.user" placeholder="降落地点"></el-input></el-col>
                <el-col :span="3"><el-date-picker type="date" placeholder="起飞时间" style="width: 100%;" v-model="form.date1"></el-date-picker></el-col>
                <el-col :span="3"><el-date-picker type="date" placeholder="降落时间" style="width: 100%;" v-model="form.date1"></el-date-picker></el-col>
                 <el-button type="danger" @click="deletetrave(index)">删除</el-button>
                </el-row>
    </div>
            <!-- 火车 -->
            <div class="travelitem" v-if="item.type=='train'">
                <el-row  :span="30">
                <el-col :span="4"><el-input v-model="form.user" placeholder="列车车次"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="发车地点"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="到达地点"></el-input></el-col>
                <el-col :span="4"><el-date-picker type="date" style="width: 100%;" placeholder="开车时间" v-model="form.date1"></el-date-picker></el-col>
                <el-col :span="4"><el-date-picker type="date" style="width: 100%;" placeholder="到达时间" v-model="form.date1"></el-date-picker></el-col>
                <el-button type="danger"  @click="deletetrave(index)">删除</el-button>
            </el-row>
              
            </div>
            <!-- 巴士 -->
            <div class="travelitem" v-if="item.type=='bus'">
                <el-row  :span="24">
                <el-col :span="4"><el-input v-model="form.user" placeholder="汽车品牌"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="车系(选填)"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="汽车颜色"></el-input></el-col>
                <el-col :span="4"><el-input v-model="form.user" placeholder="车牌号"></el-input></el-col>
                <el-button type="danger"  @click="deletetrave(index)">删除</el-button>
                </el-row>
            </div>
        </el-form-item>
            <el-form-item label="集合时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.endTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            
              <el-col :span="11">
                <el-col><el-input v-model="form.endLocation" placeholder="集合地点"></el-input></el-col>
              </el-col>
            </el-form-item>
            <el-form-item label="联系人">
              <el-select v-model="form.endContacts" placeholder="请选择联系人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="tabsItem" style="margin-top:20px">
        <div class="itemGoto">其他</div>
        <div class="itemRight">
            <label for="">带队老师</label>
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
        </div>
      </div>
    </div>
        <div class="footer">
            <el-button type="primary" >主要按钮</el-button>
             <el-button type="success" @click="addSubmit">成功按钮</el-button>
             <el-button type="info" >信息按钮</el-button>
             <el-button type="warning" >警告按钮</el-button>
             <el-button type="danger" >危险按钮</el-button>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "",
      tabsList: [
        {
          label: "用户管理",
          name: "first",
        },
        {
          label: "用户管理2",
          name: "firsts",
        },
      ],
    //   去程
      form: {
        // 出发联系人
        startContacts:"",
        // 出发日期
        startDate:"",
        // 出发集合地点
        startLocation:"",
        // 出发集合时间
        startTime:"",
        // 出发交通
        startTraffic:"aircraft",
        // 带队老师
        teamLeader:"",
        // 大石街道
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "aircraft",
        desc: "",
        // 返程
        // 返回交通
        endTraffic: "aircraft",
        // 返回集合时间
        endTime:"",
        // 返回集合地点
        endLocation:"",
        // 返回日期
        endDate:"",
        // 返回联系人
        endContacts:"",
      },

      travelList:[
    //     {
    //     type:"aircraft"
    //   },
    //   {
    //     type:"bus"
    //   },
    //   {
    //     type:"train"
    //   },
    
      ],
    };
  },
  created() {
    console.log(this.tabsList);
  },
  methods: {
    handleClick() {},
    // 添加出行项
    addTravel(){
        console.log(this.form.resource)
        let option={
            type:this.form.resource
        }
        this.travelList.push(option)
    },
    // 删除
    deletetrave(index){
       this.travelList.splice(index, 1)
        console.log(this.travelList)
    },
    addSubmit(){
        let saveModel = {
        delKeys: "",
        mainData: {},
        detailData:"",
      };
      console.log(this.form)
    }
  },
};
</script>

<style>
.ItinWrap {
  padding: 30px;
  width: 100%;
}
.Itintitle {
  width: 100%;
  height: 60px;
  font-size: 20px;
  line-height: 60px;
  background: #eeeeee;
  padding-left: 50px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.tabsItem {
  width: 100%;
  height: auto;
  border: 5px dashed #ddd;
  display: flex;
}
/* 去程 */
.itemGoto {
  height: auto;
  width: 5%;
  display: flex;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  border-right: 5px dashed #ddd;
}
.itemRight {
  padding: 20px 0;
}
.addList {
  margin-left: 20px;
}
.travelitem{
    width: 100%;
}
.travelitem .el-row {
    width: 100%;
}
.travelitem .el-col{
    margin-right: 10px;
}
.footer{
    display: flex;
    margin-top: 20px;
}

</style>